<template>
  <view class="content">
    <!-- 默认 -->
    <cos-header v-if="value === 1" title="默认导航栏组件" />
    <!-- 自定义字体颜色背景 -->
    <cos-header v-if="value === 2" title="自定义字体颜色背景" font-color="red" fixed background-color="pink"
      :background-image="backgroundImage" />
    <!-- 固定 -->
    <cos-header v-if="value === 3" title="固定导航栏组件" fixed />
    <!-- 自定义返回图标 -->
    <cos-header v-if="value === 4" title="自定义返回图标" :home-icon="backgroundImage" />
    <!-- 隐藏左右侧 返回按钮 -->
    <cos-header v-if="value === 5" title="隐藏返回导航栏组件" :is-show-back="false" />
    <cos-header v-if="value === 6" title="隐藏左侧导航栏组件" :is-show-left="false" />
    <cos-header v-if="value === 7" title="隐藏右侧导航栏组件" :is-show-right="false" />
    <!-- 自定义左侧搜索 -->
    <cos-header v-if="value === 8" title="自定义左侧搜索" :isShowLeft="false" :z-index="9999" :fixed="fixed"
      :backgroundColor="backgroundColor" :fontColor="fontColor">
      <input type="text"
        style="width: 200px; height:40px; border: 1px solid #efefef; border-radius: 10px;" /></cos-header>
    <image v-if="value === 8" src="/static/sync_bg.jpg" mode="" style="width: 100vw;"></image>

    <div class="fixed bottom-60px left-0 right-0 bg-[#ccc]">
      <wd-radio-group v-model="value" cell>
        <wd-radio :value="1">默认导航栏组件</wd-radio>
        <wd-radio :value="2">自定义字体颜色背景</wd-radio>
        <wd-radio :value="3">固定导航栏组件</wd-radio>
        <wd-radio :value="4">自定义返回图标</wd-radio>
        <wd-radio :value="5">隐藏返回导航栏组件</wd-radio>
        <wd-radio :value="6">隐藏左侧导航栏组件</wd-radio>
        <wd-radio :value="7">隐藏右侧导航栏组件</wd-radio>
        <wd-radio :value="8">自定义左侧搜索</wd-radio>
      </wd-radio-group>
    </div>

  </view>
</template>

<script setup lang="ts">

onShareAppMessage(() => ({
  title: '自定义头部',
  path: '/pagesA/cosHeader/index'
}));

const backgroundImage = ref('https://img0.baidu.com/it/u=2960283338,400984859&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1736528400&t=85b385cc73b4f82f460aaf67ae335bba')
const backgroundColor = ref('transparent')
const fontColor = ref('#fff')
const fixed = ref(true)
const value = ref(1)

</script>

<style></style>
